<template>
  <view class="fail-info">
    <header-vue :back="true" :title="'申诉失败信息'"></header-vue>
    <view class="content">
      <view class="background-image">
        <image
          :src="IMAGE_URL+'/static/master/help-bg.png'"
          mode="aspectFill"
          class="bg-img"
        ></image>
      </view>

      <!-- 申诉失败标题 -->
      <view class="fail-title">
        <text class="title-text">申诉失败</text>
      </view>

      <view class="info-box">
        <!-- 问题详细说明 -->
        <view class="info-section">
          <view class="section-title">
            <image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image>
            <text class="title">问题详细说明</text>
          </view>
          <view class="section-content">
            客户家里空间小，不太好操作，所以慢了
          </view>
        </view>

        <!-- 证明材料 -->
        <view class="info-section">
          <view class="section-title">
            <image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image>
            <text class="title">证明材料</text>
          </view>

          <view class="proof-images">
            <view
              class="image-item"
              v-for="(img, index) in proofImages"
              :key="index"
            >
              <u-image
                :src="img"
                mode="aspectFill"
                width="120rpx"
                height="140rpx"
                @click="previewImage(index)"
              ></u-image>
            </view>
          </view>
        </view>
      </view>

      <view class="info-box">
        <!-- 申诉失败原因 -->
        <view class="info-section">
          <view class="section-title">
            <image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image>
            <text class="title">申诉失败原因</text>
          </view>

          <view class="section-content">
            修一个14寸的小电视不需要太大的空间
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from '@/config/app.js'
export default {
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      proofImages: [
        "/static/images/proof1.jpg",
        "/static/images/proof2.jpg",
        "/static/images/proof3.jpg",
      ],
    };
  },
  components: {
    headerVue,
  },
  onLoad(options) {
    // 可以在这里根据options加载具体的申诉失败数据
  },
  methods: {
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        urls: this.proofImages,
        current: index,
      });
    },

    // 处理投诉
    handleComplaint() {
      uni.showModal({
        title: "投诉确认",
        content: "您确定要对此申诉结果进行投诉吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "投诉提交成功",
              icon: "success",
              duration: 2000,
            });

            // 这里可以跳转到投诉页面或执行其他操作
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fail-info {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f6f6f6;

  .content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 28rpx 32rpx;
    z-index: 1;
    position: relative;
    overflow-y: auto;

    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

      .bg-img {
        width: 100%;
        height: 100%;
        opacity: 0.1;
      }
    }

    .fail-title {
      font-size: 40rpx;
      color: #222222;
      margin-bottom: 28rpx;
    }

    .title-text {
      font-size: 36rpx;
      font-weight: 600;
      color: #222;
    }

    .info-box {
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 28rpx;
      margin-bottom: 28rpx;
    }

    .info-section {
      margin-bottom: 40rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .section-title {
      margin-bottom: 28rpx;
      display: flex;
      align-items: center;
    }
    .title-icon {
      width: 32rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }

    .section-content {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }

    .proof-images {
      display: flex;
      gap: 20rpx;
      flex-wrap: wrap;
    }

    .image-item {
      width: 120rpx;
      height: 140rpx;

      overflow: hidden;
    }

    .proof-image {
      width: 100%;
      height: 100%;
    }

    .complaint-btn {
      margin-top: 50rpx;
      text-align: center;
    }

    .btn {
      background: linear-gradient(135deg, #ff6b6b, #e74c3c);
      color: #ffffff;
      border: none;
      border-radius: 8rpx;
      padding: 24rpx 60rpx;
      font-size: 30rpx;
      font-weight: 500;
      box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);

      &:active {
        background: linear-gradient(135deg, #e74c3c, #ff6b6b);
        transform: translateY(1rpx);
      }
    }
  }
}
</style>
